<template>
	<view class="popupRule">
		<view class="title">
			添加标签
		</view>
		<view class="explain-content">
			
			<u-input v-model="tagName" type="text" :clearable="false" placeholder="请输入标签，不超过5个字" maxlength="5" border  />
		</view>
		<view class="button-container">
		    <view class="btn-click border-right" @click="close">取消</view>
			<view class="btn-click" @click="uploadUserInfo">确定</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tagName: null
		}
	},
	mounted() {
	},
	
	methods: {
		uploadUserInfo() {
			if(!this.$u.trim(this.tagName)) {
				uni.showToast({
				    title: '请输入内容',
				    icon: 'none',
				    duration: 3000,
				});
				return
			}
			this.$emit('addTag', this.tagName)
			this.close()
		},
		close() {
			this.$emit('close')
		}
	}
}
</script>

<style lang="less" scoped>
@import url("../../../common/css/var.less");
.title {
	font-size: 32rpx;
	color: #333333;
	text-align: center;
	padding-top: 64rpx;
}
.explain-content {
	padding: 56rpx 48rpx 0;
	color: #333333;
	
	.upload {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}
	.uploadImg {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 160rpx;
		height: 160rpx;
		border: 2rpx solid #E6E6E6;
		background-color: #F7F7F7;
		border-radius: 50%;
		text {
			padding-top: 4rpx;
			font-size: 24rpx;
			color: #999
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
}
.button-container {
	margin-top: 60rpx;
	text-align: center;
	display: flex;
	border-top: 1px solid #E7E7E7;
	.btn-click {
		position: relative;
		width: 50%;
		height: 110rpx;
		line-height: 110rpx;
		background: #fff;
		font-size: 32rpx;
		color: @mColor;
		&.border-right {
			color: @mText;
			border-right: 1px solid #E7E7E7;
		}
	}
}
</style>
